<!doctype html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" type="text/css" href="{{pluginResources}}/Template/towerData/tower.css" />
    <link rel="preload" href="{{pluginResources}}/fonts/Guruwords.ttf" as="font" />
</head>

<body id="body" {{sys.scale}}>
    <div>
        <div id="account">
            {{if avatarUrl}}<img src="{{avatarUrl}}" id="user-avatar">{{/if}}
            <div id="user-name">{{baseData.name}}</div>
            <div id="user-uid">{{baseData.id}}</div>
        </div>
        <div class="tower-body">
            {{each towerData.difficultyList area}}
            {{if area.difficulty == towerData.difficulty}}
            {{each area.towerAreaList tower}}
            <div class="tower-area">
                <span class="tower-name">{{towerData.diffiname}}·{{tower.areaName}}</span>
                <span class="tower-star">{{tower.star}}/{{tower.maxStar}}</span>
            </div>
            {{each tower.floorList floor}}
            <div class="floor-list" style="background-image: url({{floor.picUrl}});">
                <div class="floor-name" floor="{{floor.floor}}"></div>
                <div class="star-icon" starlevel="{{floor.star}}">
                    <img src="{{pluginResources}}/Template/towerData/imgs/star.jpg">
                    <img src="{{pluginResources}}/Template/towerData/imgs/star.jpg">
                    <img src="{{pluginResources}}/Template/towerData/imgs/star.jpg">
                </div>
                {{each floor.roleList role}}
                <div class="avatar-frame">
                    <img src="{{role.iconUrl}}" class="avatar">
                </div>
                {{/each}}
            </div>
            {{/each}}
            {{/each}}
            {{/if}}
            {{/each}}
        </div>
        <div id="copyright">{{@copyright}}</div>
    </div>

    <script>
        const starList = Array.from(document.getElementsByClassName("star-icon"));
        starList.forEach((ele) => {
            const starlevel = Number(ele.getAttribute("starlevel"));
            const stars = Array.from(ele.getElementsByTagName("img"));
            stars.forEach((star, idx) => {
                if (idx < starlevel) {
                    star.style.display = "inline";
                }
            });
        });

        const floorList = Array.from(document.getElementsByClassName("floor-name"));
        floorList.forEach((ele) => {
            const floor = ele.getAttribute("floor");
            if (floor) {
                switch (floor) {
                    case "1":
                        ele.innerText = "第一层";
                        break;
                    case "2":
                        ele.innerText = "第二层";
                        break;
                    case "3":
                        ele.innerText = "第三层";
                        break;
                    default:
                        ele.innerText = "第四层";
                        break;
                }
            }
        });
    </script>
</body>

</html>